<template>
	<uv-popup ref="popup" mode="bottom" round=" 30rpx">
		<view class="dam-flex_column jz-search-list-pop">
			<uv-search placeholder="请输入搜索内容" v-model="_searchInfo" :borderColor="_isFocus?damTheme.color_focus:''"
				@search="doSearch" @custom="doSearch" @change="onSearchChange" @focus="onFocus"
				@blur="onBlur"></uv-search>
			<scroll-view class="sv_content" scroll-y :show-scrollbar="false">
				<uv-list padding="$dam-margin2">
					<uv-list-item v-for="(item, index) in dataList" :key="index">
						<slot :item="item"></slot>
					</uv-list-item>
				</uv-list>
			</scroll-view>
		</view>
	</uv-popup>
</template>

<script lang="ts" setup>
	import { ref, watch } from 'vue';
	import { getTheme } from '@/dam_uni_frame/utils/DamApi';
	const damTheme = getTheme();
	const popup = ref();
	const _searchInfo = ref();
	const _isFocus = ref(false);

	const props = defineProps({
		dataList: {
			type: Array,
			default: []
		},
		searchInfo: {
			type: String,
			default: ''
		}
	});

	watch(() => props.searchInfo, (newValue, oldValue) => {
		_searchInfo.value = newValue;
	}, { immediate: true });

	
	const emits = defineEmits(['search','searchChange']);
	defineExpose({showPop,dismissPop})

	function showPop() {
		popup.value.open();
	}
	function dismissPop() {
		popup.value.close();
	}
	function doSearch() {
		emits('search', _searchInfo.value);
	}
	function onSearchChange() {
		emits('searchChange', _searchInfo.value);
	}
	function onFocus() {
		_isFocus.value = true;
	}
	function onBlur() {
		_isFocus.value = false;
	}
</script>

<style lang="scss">
	@import "/dam_uni_frame/styles/dam_theme_common.scss";

	.jz-search-list-pop {
		max-height: 60vh;
		min-height: 20vh;
		padding: $dam-margin4 $dam-margin3 $dam-margin2 $dam-margin3;
		background-color: v-bind('damTheme.color_bg');
	}

	.uv-search {
		height: $dam-input-height_normal;
		flex: -1
	}

	.sv_content {
		margin-top: $dam-margin2;
		max-height: calc(60vh - $dam-input-height_normal);
		min-height: calc(20vh - $dam-input-height_normal);
	}
</style>